/**
 * Created by huotaol on 2017/5/9.
 */
import React, {Component} from "react";
import {Text, TouchableOpacity, View} from "react-native";
import CustomStyle from "../../../common/style/CustomStyle";
import {connect} from "react-redux";
import GiftedListView from "react-native-gifted-listview";
import MineItem from "../../components/MineItem";
import * as Url from "../../constant/Url";
import {request} from "../../../common/util/RequestUtil";
import SearchHeader from "../buyCar/component/SearchHeader";
import {Actions} from "react-native-router-flux";

const URL_BY_MAX = '/shop/get_shops_by_max';
const URL_BY_NAME = '/shop/search_shops';

class Search extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {};
        this._renderRow = this._renderRow.bind(this);
        this._onFetch = this._onFetch.bind(this);
    }

    render() {
        return (
            <View style={{flex: 1}}>
                <SearchHeader titleHolder={'请输入要查询的店铺'} confirm={(value) => {
                    this.searchShopName = value;
                    console.log('search ' + value);
                    this.refs.listview._refresh();
                }}/>
                <GiftedListView
                    ref="listview"
                    initialListSize={5}
                    rowView={this._renderRow}
                    onFetch={this._onFetch.bind(this)}
                    firstLoader={true} // display a loader for the first fetching
                    pagination={false} // enable infinite scrolling using touch to load more
                    enableEmptySections={true}
                    refreshable={false} // enable pull-to-refresh for iOS and touch-to-refresh for Android
                    withSections={false} // enable sections
                    refreshableTintColor="#999999"
                />
                <TouchableOpacity
                    onPress={() => {
                        this.refs.listview._onRefresh();
                    }}
                    style={{
                        width: CustomStyle.getActualSizeInHorizontal(440),
                        height: CustomStyle.getActualSizeInVertical(88),
                        backgroundColor: '#ff7200',
                        borderRadius: CustomStyle.getActualSizeInHorizontal(44),
                        alignSelf: 'center',
                        alignItems: 'center',
                        justifyContent: 'center',
                        marginBottom: CustomStyle.getActualSizeInVertical(30),
                    }}>
                    <Text style={[CustomStyle.baseText, {
                        fontSize: CustomStyle.getActualFontSize(36),
                        color: 'white',
                    }]}>换一批</Text>
                </TouchableOpacity>
            </View>
        );
    }

    _renderRow(item) {
        return <MineItem title={item.name} click={() => {
            Actions.ShopDetail({id: item.id})
        }}/>
    }

    _onFetch(page = 1, callback, options) {
        const searchName = this.searchShopName;
        console.log('fetch  ' + searchName);
        let url = Url.BASE_URL;
        if (searchName) {
            url += URL_BY_NAME;
        } else {
            url += URL_BY_MAX;
        }
        const param = new FormData();
        if (searchName) {
            param.append('name', searchName);
        } else {
            param.append('max', 10);
        }
        request(url, 'post', param).then(json => {
            const data = json.data;
            const imagePrefix = data.imgPrefix;
            const list = data.list;
            const shopList = list.map(item => {
                return Object.assign({}, item, {logo: imagePrefix + item.logo});
            });
            console.log('searchShop  ' + JSON.stringify(json));
            callback(shopList);
        }).catch(err => {
            callback();
            console.log('seach shop err ' + err);
        });

    }
}


export default connect()(Search);
